<template>
  <div>
    <TopBack title="预订"></TopBack>
    <div class="all">
      <div class="head-red">
        <div class="select">
          <div class="select-date">
            <div>
              {{ data.start }} -<button>{{ data.sum }}晚</button>-
              {{ data.end }}
            </div>
            <span
              ><a href="#">房间类型 <van-icon name="arrow" /></a
            ></span>
          </div>
          <p>轻享智能{{ roomName }}房[市政供暖]</p>
          <p>
            大床 • {{ breakfast }}早餐 • {{ serveName.area }} • {{ smoke }}吸烟
            • {{ smoke }}WiFi
          </p>
          <div class="hint">
            <p>预定成功后15分钟内可免费取消</p>
            <span
              ><a href="#">订房必读 <van-icon name="arrow" /></a
            ></span>
          </div>
        </div>
      </div>
      <!----头部结束--->
      <div class="Check-in-prompt">
        <svg
          t="1640940262040"
          class="icon1"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3389"
          width="18"
          height="18"
        >
          <path
            d="M511.562 63.513c-95.1 0-183.3 29.6-255.9 80 116.7 81.1 193.1 216.1 193.1 369s-76.4 287.9-193.1 369c72.6 50.4 160.8 80 255.9 80 248 0 449-201 449-449s-201.1-449-449-449z"
            p-id="3390"
            fill="#ffffff"
          ></path>
        </svg>
        <span class="span1">&nbsp;&nbsp;整晚留房</span>
        预定成功后酒店将为您整晚留房<br />
        <svg
          t="1640940589278"
          class="icon2"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="3932"
          width="20"
          height="20"
        >
          <path
            d="M887.904 298.208c-12.864-12.064-33.152-11.488-45.216 1.408L415.936 753.984l-233.12-229.696c-12.608-12.416-32.864-12.288-45.28 0.32-12.416 12.576-12.256 32.864 0.352 45.248l256.48 252.672c0.096 0.096 0.224 0.128 0.32 0.224s0.128 0.224 0.224 0.32c2.016 1.92 4.448 3.008 6.784 4.288 1.152 0.672 2.144 1.664 3.36 2.144 3.776 1.472 7.776 2.24 11.744 2.24 4.192 0 8.384-0.832 12.288-2.496 1.312-0.544 2.336-1.664 3.552-2.368 2.4-1.408 4.896-2.592 6.944-4.672 0.096-0.096 0.128-0.256 0.224-0.352 0.064-0.096 0.192-0.128 0.288-0.224L889.28 343.424c12.16-12.832 11.488-33.088-1.376-45.216z"
            fill="#ffffff"
            p-id="3933"
          ></path>
        </svg>
        <span class="span2">&nbsp;&nbsp;极速退&nbsp;&nbsp; </span>
        预定成功后15分钟内可免费取消
      </div>
      <div class="client-msg">
        <van-cell-group
          ><!--入住客户信息填入-->
          <van-field
            label="房间数"
            value="1间(每间最多住2人)"
            readonly
            right-icon="arrow"
          />
          <van-field
            label="入住人"
            placeholder="每间填写1位住客姓名"
            v-model="username"
          />
          <van-field
            label="联系手机"
            v-model="usertel"
            placeholder="用于接收短信"
          />
          <van-field
            label="预计到店"
            value="17:00(房间整晚保留)"
            readonly
            right-icon="arrow"
          />
        </van-cell-group>
      </div>
      <!----优惠券------->
      <div class="discount-coupon">
        <!-- 优惠券单元格 -->
        <van-coupon-cell
          :coupons="coupons"
          :chosen-coupon="chosenCoupon"
          @click="showList = true"
        />
        <!-- 优惠券列表 -->
        <van-popup
          v-model="showList"
          round
          position="bottom"
          style="height: 90%; padding-top: 4px"
        >
          <van-coupon-list
            :coupons="coupons"
            :chosen-coupon="chosenCoupon"
            :disabled-coupons="disabledCoupons"
            @change="onChange"
            @exchange="onExchange"
          />
        </van-popup>
      </div>
      <!----优惠券结束------->
      <div class="footer">
        <div class="left">
          <div class="left-div1">
            总价<span class="left-span1">￥{{ allmoney }}</span
            ><br />
            <span class="left-span2">已优惠￥20</span>
          </div>
          <div class="left-div">明细 <van-icon name="arrow-down" /></div>
        </div>
        <div class="right" @click="pay">提交订单</div>
      </div>
    </div>
  </div>
</template>

<script>
import TopBack from "../../components/TopBack.vue";
import { getRoomType } from "../../api/roomApi.js";
import { getServeType } from "../../api/ServeApi.js";
const coupon = {
  available: 1,
  condition: "无使用门槛",
  reason: "",
  name: "优惠券名称",
  startAt: 1489104000,
  endAt: 1514592000,
  valueDesc: "20",
  unitDesc: "元",
};
export default {
  data() {
    return {
      id: 0,
      hotelId: "",
      roomId: "",
      chosenCoupon: -1,
      coupons: [coupon],
      disabledCoupons: [coupon],
      showList: false,
      data: {
        //时间传递
        start: "",
        end: "",
        sum: 0,
      },
      roomName: "", //房屋类型
      serveName: [], //服务信息
      breakfast: "",
      wifi: "",
      smoke: "", //吸烟
      price: "", //单价
      allmoneies: "", //总价
      username: "", //入住人姓名
      usertel: "", //手机号
    };
  },
  components: { TopBack },
  created() {
    // console.log('book加载',this.$route.query.data.sum);
    this.hotelId = this.$route.query.hotelId;
    this.roomId = this.$route.query.roomId;
    this.data.start = this.$route.query.start;
    this.data.end = this.$route.query.end;
    this.data.sum = this.$route.query.sum;
  },
  methods: {
    pay() {
      this.$router.push({
        path: "/pay",
        query: {
          hotelId: this.hotelId,
          roomId: this.roomId,
          money: this.allmoneies,
          username: this.username,
          usertel: this.usertel,
          start: this.data.start,
          end: this.data.end,
          sum: this.data.sum,
        },
      });
    },
    onChange(index) {
      this.showList = false;
      this.chosenCoupon = index;
    },
    onExchange(code) {
      this.coupons.push(coupon);
    },
  },
  mounted() {
    getRoomType().then((res) => {
      let room = res.data;
      room = room.filter((item) => item.roomId == this.roomId);
      // console.log(room);
      this.roomName = room[0].roomType;
      this.price = room[0].price;
    });
    getServeType().then((res) => {
      let serve = res.data;
      serve = serve.filter((item) => item.serviceId == this.roomId);
      this.serveName = serve[0];
      if (this.serveName.breakfast == "0") {
        this.breakfast = "有";
      } else {
        this.breakfast = "没有";
      }

      if (this.serveName.wifi == "0") {
        this.wifi = "有";
      } else {
        this.wifi = "没有";
      }

      if (this.serveName.smoke == "0") {
        this.smoke = "有";
      } else {
        this.smoke = "没有";
      }
    });
  },
  computed: {
    allmoney() {
      // console.log(this.price,this.data.sum);
      this.allmoneies = this.price * this.data.sum - 20;
      return this.allmoneies;
    },
  },
};
</script>

<style lang="less" scoped>
* {
  font-size: 14px;
  margin: 0px;
}
.box {
  height: 100%;
}
.left-div1 {
  margin-top: 5px;
}
.left {
  display: flex;
  justify-content: space-between;
  width: 50%;
  line-height: 20px;
  background: #f9f9f9;
  padding-left: 14px;
}
.left-div {
  margin-top: 10px;
}
.left-span1 {
  font-size: 16px;
  color: #ff5452;
}
.left-span2 {
  font-size: 12px;
}
.right {
  color: #ffffff;
  width: 50%;
  background: #033e98;
  text-align: center;
  font-size: 20px;
  line-height: 250%;
}
.rigth button {
  width: 100%;
  height: 100%;
}
.footer {
  display: flex;
  justify-content: space-between;
  height: 50px;
}
.Check-in-prompt {
  height: 80px;
  padding-top: 15px;
  line-height: 30px;
  font-size: 14px;
  color: #8a94a3;
  padding-left: 15px;
  background-color: #fff;
}
.Check-in-prompt svg {
  position: relative;
  top: 4px;
}
.Check-in-prompt span {
  font-size: 16px;
  top: -5px;
}
.span1 {
  color: #00b0a4;
}
.span2 {
  color: #0590fb;
}
.select {
  background: #ffffff;
  padding-left: 10px;
  padding-right: 10px;
  width: 90%;
  height: 160px;
  margin-left: 10px;
  border-radius: 10px;
  margin-top: 20px;
}
.hint {
  padding-top: 10px;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  border-top: #f5f5f5 0.5px solid;
}
.icon1 {
  border-radius: 30%;
  background-color: #00b0a4;
}
.icon2 {
  background-color: #0590fb;
  border-radius: 30%;
}
.select-date {
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
}
p:nth-of-type(1) {
  margin-top: 10px;
  margin-bottom: 10px;
}
.hint span {
  margin-top: 10px;
}
.select button {
  border-radius: 20px;
  border: #8a94a3 1px solid;
  color: #8a94a3;
  font-size: 10px;
  height: 90%;
}
.head-red {
  height: 30%;
  background: #033e98;
  margin-top: -20px;
}
.title-head {
  color: #fff7f7;
  text-align: center;
  font-size: 16px;
}
.title-icon {
  float: left;
  margin-top: 5px;
}
.all {
  height: 70%;
}
.client-msg {
  height: 200px;
}
.van-cell-group {
  height: 100%;
  .van-field {
    height: 25%;
  }
}
</style>
